<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 500px;
            height: 300px;
            border: 1px solid #000;
              display: flex;
              flex-wrap: wrap;
        }
        #box li{
           flex: 30%;
            height: 150px;
            border: 1px solid #000;
            background-color: rgba(189, 55, 55, 0.331);
        }
        #box .red{
            background-color: #fff;
        }
        #box1{
            width: 500px;
            border: 1px solid #000;
        }
        #box11{
            width: 500px;
            height: 40px;
            line-height: 40px;
            background-color: #000;
           
        }
        #box11 span{
            display: inline-block;
            color: #fff;
             background-color: #000;
 width: 90px;
 text-align: center;
        }
        #box11 .bos{
            color: #000;
            background-color: #fff;
        }
        #box2{
            width: 500px;
            height: 500px;
            background-color: #ccc;
            padding: 10px;
            box-sizing: border-box;
        }
        #box2 ul{
            display: flex;
            flex-wrap: wrap;
            width: 480px;
             box-sizing: border-box;
        }
        #box2 ul li{
            flex: 30%;
            text-align: center;
            list-style: none;
            height: 80px;
            border: 1px solid #000;
            background-color: #000;
            color: #fff;
            margin-top: 10px;
            margin-right: 10px;
            font-weight: 550;
            
        }
        #box2 ul .boss{
            background-color: #fff;
            color: pink;
        }
        #box3{
            width: 400px;
           
            border: 1px solid #000;
            box-sizing: border-box;
        }
        #box3 #box31{
            border: 1px solid #000;
            background-color: rgba(255, 0, 0, 0.247);
        }
        #box3 ul li{
            width: 100%;
            height: 30px;
            /* text-align: center; */
            color: #000;
            list-style: none;
            background-color: #ccc;
            line-height: 30px;
        }
        #box3 ul{
            padding-left: 0;
        }
        #box3 ul li:hover{
            background-color: #fff;
        }
        #outer{
            width: 220px;
            border-radius: 10px;
            background-color: #000;
            overflow: hidden;
            padding: 10px;
          
        }
        #outer img{
            float: left;
            padding: 2px;
        }
        #box5{
            width: 200px;
            border: 1px solid #000;
            text-align: center;
            padding: 4px;
            
        }
        #b5{
            width: 180px;
            border-bottom: 1px solid #000;
            margin: auto;
            
        }
        #b55{
            list-style: none;
            
        }
    </style>
</head>
<body>
    <div id="box">
    
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
  
    </div>
    <!-- 切换元素 -->

    <div id="box1">
        <div id="box11"><span>第一课</span>
        <span>第二课</span>
        <span>第三课</span></div>
        <div id="box12">
            <ul style="display: none;">
            <li>改变网页背景颜色</li>
            <li>函数传参</li>
            <li>高重用性函数的编写</li>
            <li>126邮箱全选效果</li>
            <li>循环及遍历操作</li>
            <li>调试器的简单使用</li>
            <li>典型循环的构成</li>
            <li>for循环配合if判断</li>
            <li>className的使用</li>
            <li>innerHTML的使用</li>
            <li>戛纳印象效果</li>
            <li>数组</li>
            <li>字符串连接</li>
        </ul>
        <ul style="display: none;">
            <li>网页特效原理分析</li>
            <li>响应用户操作</li>
            <li>提示框效果</li>
            <li>事件驱动</li>
            <li>元素属性操作</li>
            <li>动手编写第一个JS特效</li>
            <li>引入函数</li>
            <li>网页换肤效果</li>
            <li>展开/收缩播放列表效果</li>
        </ul>
        <ul style="display: block;">
            <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
            <li>JavaScript出现的位置、优缺点</li>
            <li>变量、类型、typeof、数据类型转换、变量作用域</li>
            <li>闭包：什么是闭包、简单应用、闭包缺点</li>
            <li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
            <li>程序流程控制：判断、循环、跳出</li>
            <li>命名规范：命名规范及必要性、匈牙利命名法</li>
            <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
            <li>定时器的使用：setInterval、setTimeout</li>
            <li>定时器应用：站长站导航效果</li>
            <li>定时器应用：自动播放的选项卡</li>
            <li>定时器应用：数码时钟</li>
            <li>程序调试方法</li>
        </ul>
        </div>
        
    </div>
    <!-- 切换节气 -->
    <div id="box2">
        <ul>
            <li class="boss">
                <p>1</p>
                <span>yue</span>
            </li>
            <li>
                <p>2</p>
                <span>yue</span>
            </li>
            <li>
                <p>3</p>
                <span>yue</span>
            </li>
            <li>
                <p>4</p>
                <span>yue</span>
            </li>
            <li>
                <p>5</p>
                <span>yue</span>
            </li>
            <li>
                <p>6</p>
                <span>yue</span>
            </li>
            <li>
                <p>7</p>
                <span>yue</span>
            </li>
            <li>
                <p>8</p>
                <span>yue</span>
            </li>
            <li>
                <p>9</p>
                <span>yue</span>
            </li>
            <li>
                <p>10</p>
                <span>yue</span>
            </li>
            <li>
                <p>11</p>
                <span>yue</span>
            </li>
            <li>
                <p>12</p>
                <span>yue</span>
            </li>
           
        </ul>
    <div id="box21">
        <p style="font-weight: 550;"><span id="yuef">1</span>
        月节日</p>
        <p id="box22" style="width: 400px;background-color:#fff;">"元旦：1月1日至3日放假三天。",</p>
    </div>
    </div>
    <div id="box3">
        <div id="box31">播放列表</div>
        <ul style="display: block;">
            <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
            <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>
            <li><a href="javascript:;">猜不透 - 丁当</a></li>
            <li><a href="javascript:;">自导自演 - 周杰伦</a></li>
            <li><a href="javascript:;">浪漫窝 - 弦子</a></li>
            <li><a href="javascript:;">流年 - 王菲</a></li>
        </ul>
    </div>

    <!-- 播放列表 -->
    
        <div id="outer">
            <div id="big">
                <img src="./image/big_1.jpg" alt="">
            </div>
            <img src="./image/small_1.jpg" alt="">
            <img src="./image/small_2.jpg" alt="">
            <img src="./image/small_3.jpg" alt="">
            <img  src="./image/small_4.jpg" alt="">
            <img src="./image/small_5.jpg" alt="">
            <img src="./image/small_6.jpg" alt="">
            <img src="./image/small_7.jpg" alt="">
            <img src="./image/small_8.jpg" alt="">
            <img src="./image/small_9.jpg" alt="">
            <img src="./image/small_10.jpg" alt="">
            <img src="./image/small_11.jpg" alt="">
        </div>
        <!-- 第六个 -->

        <div id="box5">
            <div id="b5">
                <input type="checkbox" id="qx">
                <span id="bx">全选</span>
                <button id="fx">反选</button>
            </div>
            <div id="b55">
                <li>
                    <input type="checkbox">
                    <span>选项1</span>
                </li>
                <li>
                    <input type="checkbox">
                    <span>选项2</span>
                </li>
                <li>
                    <input type="checkbox">
                    <span>选项3</span>
                </li>
                <li>
                    <input type="checkbox">
                    <span>选项4</span>
                </li>
                <li>
                    <input type="checkbox">
                    <span>选项5</span>
                </li>
                <li>
                    <input type="checkbox">
                    <span>选项6</span>
                </li>
                <li>
                    <input type="checkbox">
                    <span>选项7</span>
                </li>

            </div>

        </div>

</body>
<script>
    var box=document.getElementById('box').getElementsByTagName('li')
    for(var i=0;i<box.length;i++){
        box[i].onmouseenter=function(){
            this.className='red'
        }
        box[i].onmouseleave = function () {
            this.className = ''
        }
    }
    //第二个作业
    var box11=document.getElementById('box11').getElementsByTagName('span')
    var box12=document.getElementById('box12').getElementsByTagName('ul')
    for (let index = 0; index < box11.length; index++) {
        box11[index].onmouseenter=function(){
          this.className = 'bos'
            for (let i = 0; i < box12.length; i++) {
                 box12[i].style.display = 'none'
                
            }
            
            box12[index].style.display='block'
        }
        box11[index].onmouseleave=function(){
            
            this.className=''
        }
        
    }

    //第三个作业
    var box2=document.getElementById('box2').getElementsByTagName('li')
    var yuef=document.getElementById('yuef')
    var box22=document.getElementById('box22')
    var arr= [

            "元旦：1月1日至3日放假三天。",
            "春节：2月2日至8日放假7天。",
            "妇女节：3月8日妇女节，与我无关。",
            "清明节：4月3日至5日放假3天",
            "劳动节：4月30日至5月2日放假3天。",
            "端午节：6月4日至6日放假3天。",
            "小暑：7月7日小暑。不放假。",
            "七夕节：8月6日七夕节。不放假。",
            "中秋节：9月10日至12日放假3天。",
            "国庆节：10月1日至7日放假7天。",
            "立冬：11月8日立冬。不放假。",
            "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
        ]

        for (let i = 0; i < box2.length; i++) {
            box2[i].index=i
            box2[i].onmouseover=function(){
                for (let j = 0; j < box2.length; j++) {
                    
                    box2[j].className=''
                    this.className = 'boss'
                    
                }
                yuef.innerHTML=this.index+1
                box22.innerHTML=arr[this.index]
            }
            
        }

        //第四个作业
        var box3=document.getElementById('box31')
        var box3ul=document.getElementById('box3').getElementsByTagName('ul')[0]
        box3.onclick=function(){
           box3ul.style.display= box3ul.style.display=='none'?'block':'none'
        }
        //第五个作业

        var outer= document.getElementById('outer').getElementsByTagName('img')
        for (let i = 1; i < outer.length; i++) {
            outer[i].index=i
            outer[i].onmouseover=function(){

                outer[0].src='./image/big_'+this.index+'.jpg'
            }
            
        }
        //第六个作业
        var qx=document.getElementById('qx')
        var fx=document.getElementById('fx')
        var b55=document.getElementById('b55').getElementsByTagName('input')
        var bx=document.getElementById('bx')
        qx.onclick=function(){
   
                for (let i = 0; i < b55.length; i++) {
                    b55[i].checked=this.checked
                }
                ischeck()
            }
            fx.onclick=function(){
                for (let i = 0; i < b55.length; i++) {
                    b55[i].checked = !b55[i].checked
                }
                ischeck()
            }
        var ischeck=function(){
          for (var i = 0 ,n=0; i < b55.length; i++) {
            b55[i].checked&&n++

            
        }
        qx.checked=n==b55.length
        bx.innerHTML= qx.checked?'全不选':'全选'
        }
        for (let i = 0; i < b55.length; i++) {
                b55[i].onclick=function(){
                    ischeck()
                }
            }

</script>
</html>